<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/components.html -->
		<title>组件基础</title>
	</head>
	<body>
		<div id="vm1">

			<p>Message is :{{message}}</p>
			<button-counter title="title1" @clicknow='clicknow'>
				<!--  <slot></slot> 插槽-->
				<!-- <h1>hi ...</h1> -->
			</button-counter>
			<!-- 组件可以复用 -->
			<button-counter title="title2"></button-counter>
		</div>
		<script type="text/javascript">
			// 定义一个名为 button-counter 的新组件
			Vue.component('button-counter', {
				props: ['title'],//通过 Prop 向子组件传递数据
				data: function() {
					return {
						count: 0
					}
				},

				methods: {
					clickFun: function() {
						this.count++,
							this.$emit('clicknow', this.count)
					}
				},


				// template: '<button v-on:click="count++">{{title}}You clicked me {{ count }} times.</button>',
				//在一个模板内使用多个html标签 使用div
				template: '<div><h1> hi...</h1><button v-on:click="clickFun">{{title}}You clicked me {{ count }} times.</button><slot></slot></div>'
			})


			var data = {
				message: '组件基础',
				message2: '',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/list.html',
				isActive: true,
				isGreen: true,
				color: '#FF0000',
				size: '50px',
				type: 'C',
				isShow: true,
				numbers: [1, 2, 3, 4, 5, 6],
				counter: 0,
				checkedNames: [],
				picked: '',
				txt: 'test',
			}

			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					clicknow: function(e) {
						console.log(e)
					}
				}
			})
		</script>
	</body>
</html>
